<template>
	<div class="team">
		<header>
      <div class="top">
        <div class="left" v-if="mainStore.storeIsLogin">
          <van-image class="avatar" round width="50px" height="50px" fit="cover" :src="imgUrl + mainStore.storeInfo.storeimgs" />
          <div class="info">
            <div class="name">{{ mainStore.storeInfo.title}}</div>
            <span>注册时间：{{ mainStore.storeInfo.add_time }}</span>
          </div>
        </div>
        <div class="left" v-else>
          <van-image class="avatar" round width="50px" height="50px" fit="cover" :src="mainStore.userInfo.head_img_url" />
          <div class="info">
            <div class="name">{{ mainStore.userInfo.nick_name || mainStore.userInfo.username}}</div>
            <span>注册时间：{{ mainStore.userInfo.add_time }}</span>
          </div>
        </div>
        <div class="right">
          <span>{{ totalCount }}</span>
          <div>我的团队</div>
        </div>
      </div>
			<div v-if="state.type == 'matchmaker'" class="bottom">
        <div><span>直接推荐【红娘月老】满20人，</span></div>
        <div><span>可联系4006-510-520申请免费开店。</span></div>
      </div>
		</header>
    <van-tabs
        v-if="state.type == 'member'"
        v-model:active="state.active"
        line-width="20px"
        title-inactive-color="#484848"
        :before-change="tabsBeforeChange"
    >
      <van-tab v-for="item of state.tabs" :title="item.key" :key="item.value"></van-tab>
    </van-tabs>
		<div class="tab">
			<div>
				<span>头像</span>
				<span>昵称</span>
			</div>
			<div>加入时间</div>
		</div>

		<van-list
			class="list"
			v-model:loading="state.loading"
			:finished="state.finished"
			finished-text="没有更多了"
			@load="getUserTeam"
		>
			<div class="list_item" v-for="item of state.userTeamList" :key="item.id">
        <div class="left" @click="jumpUserDetail(item.identity,item.id)">
          <!--     头像     -->
          <van-image round width="38px" height="38px" lazy-load :src="userHeadImg(item)" />
          <!--     昵称     -->
          <div v-if="item.is_userInfo == 0" class="name">{{ item.nick_name }}</div>
          <div v-else-if="!mainStore.storeIsLogin" class="name">{{ item.userInfo.username }}</div>
          <div v-else class="name">{{item.title}}</div>
        </div>
				<div class="time">
          <!--     拨号按钮     -->
          <a v-if="checkRoles(mainStore.userInfo?.identity,'3') && !checkRoles(item.identity,'0')" :href="getUserMobile(item.userInfo.mobile)">
            <img style="margin-right: 25px" width="32" height="32" src="@/assets/img/video/call_tel.png" />
          </a>
          <span>{{ item.add_time }}</span>
        </div>
			</div>
		</van-list>
	</div>
</template>

<script setup lang="ts">
import {reactive, computed, onMounted} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import { useMainStore } from '@/store/index';
import { useComponentStore } from '@/store/page';
import { userTeam, redMotherTeam, storeTeam } from '@/api/my';
import {Toast} from "vant";

const imgUrl = import.meta.env.VITE_IMG_URL;
const router = useRouter();
const route = useRoute();
const mainStore = useMainStore();
const componentStore = useComponentStore();
const state = reactive<any>({
	type: route.query.type,
  active: 0,
  tabs: [
    { key: '游客', value: 0 },
    { key: '注册用户', value: 1 },
    //{ key: 'VIP用户', value: 2 },
    { key: '栏目认证', value: 3 },
  ],
	pageInfo: {
		pageIndex: 1,
		pageSize: 10,
		parent_id: mainStore.userInfo.user_id,
    state:0
	},
	loading: false,
	finished: false,
	userTeamList: [],
	total_count: ''
});

onMounted(async () => {
  // 注销缓存的标识
  router.beforeEach((to, from, next) => {
    if (from.name == 'team' && to.name != 'memberDetail') {
      componentStore.activeByPage = null;
      componentStore.activeIndex = null;
    }
    next();
  });
  // 当有标识
 if (componentStore.activeByPage == 'team') {
   if (componentStore.activeIndex) {
     state.active = componentStore.activeIndex;
     state.pageInfo.state = state.active;
     state.pageInfo.pageIndex = 1;
     state.userTeamList = [];
   }
 }
});

// 拨号
const getUserMobile = (mobile:string) => {
  return `tel:${mobile}`;
}

// 身份判断
const checkRoles = (identity:string,key: string): boolean => {
  return String(identity).split(',').includes(key);
};

// 头像
const userHeadImg = (item:any) : string => {
  if (mainStore.storeIsLogin) {
    if (mainStore.storeInfo.storeimgs) {
      return imgUrl + mainStore.storeInfo.storeimgs
    } else {
      return item.head_img_url
    }
  } else {
    return item.head_img_url
  }
}

// 跳转用户详情
const jumpUserDetail = (item : any,user_id:number) => {
  if (mainStore.storeIsLogin) {
    return false;
  }
  if (checkRoles(item,'0')) {
    return Toast('该用户尚未注册');
  }
  let type: string;
  let name: string;
  type = 'user'
  name = 'memberDetail'
  if (state.type === 'member') {
    type = 'user'
    name = 'memberDetail'
  } else if (state.type === 'matchmaker') {
    type = 'matchmaker'
    name = 'userDetail'
  } else {
    type = 'stores'
    name = 'memberDetail'
  }
  router.push({ name: name, query: { user_id, type: type } });
}

// tab切换
const tabsBeforeChange = (name: number | string): boolean => {
  componentStore.activeByPage = 'team';
  componentStore.activeIndex = name;
  state.pageInfo.state = state.tabs[name].value;
  state.pageInfo.pageIndex = 1;
  state.userTeamList = [];
  getUserTeam();
  return true;
};

// 统计人数
const totalCount = computed<string>(() => {
	return state.userTeamList.reduce((pre: any,cur:any ,index:any, val: any): number => {
    let i = index++;
    return i+1;
	}, 0);
});

// 团队成员
const getUserTeam = async () => {
	let res: any = null;
  if (typeof state.pageInfo.parent_id == 'undefined') {
    state.pageInfo.parent_id = mainStore.userInfo.id
  }
  //state.pageInfo.parent_id = 45;
	if (state.type === 'member') {
    // 会员团队
		res = await userTeam(state.pageInfo);
	} else if (state.type === 'matchmaker') {
    // 红娘团队
    res = await redMotherTeam(state.pageInfo);
	} else {
    // 门店团队
    if (mainStore.storeIsLogin) {
      state.pageInfo.parent_id = mainStore.storeInfo.member.user_id
    } else {
      state.pageInfo.parent_id = mainStore.user_id
    }
    res = await storeTeam(state.pageInfo);
  }
	let { dataList, pageInfo } = res.data;
	if (dataList.length) {
		state.total_count = pageInfo.total_count;
		state.pageInfo.pageIndex++;
		state.userTeamList = [...state.userTeamList, ...dataList];
		state.loading = false;
	} else {
		state.finished = true;
	}
};
</script>

<style lang="scss" scoped>
.team {
	header {
    position: relative;
    .top {
      @include flx-justify-between;
      height: 140px;
      box-sizing: border-box;
      padding: 38px 15px 44px 15px;
      color: #ffffff;
      background: linear-gradient(111deg, #f53d7d, #fb56b3);
      .left {
        @include flx-justify-between;
        height: 100%;
        .info {
          @include flx-direction-between;
          box-sizing: border-box;
          padding: 8px 0;
          height: 100%;

          margin-left: 10px;
          font-size: 12px;
          .name {
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
      .right {
        @include flx-direction-between;
        box-sizing: border-box;
        padding: 8px 0;
        height: 100%;
        font-size: 12px;
        text-align: center;
        span {
          font-size: 18px;
        }
      }
    }
		.bottom {
      position: absolute;
      bottom: 5px;
      text-align: center;
      width: 100%;
      font-size: 14px;
      color: white;
    }
	}
	.tab {
		@include flx-justify-between;
		height: 50px;
		padding: 0 20px;
		font-size: 14px;
		background: #f5f5f5;
		span {
			display: inline-block;
			width: 38px;
			margin-right: 12px;
		}
	}
	.list {
		min-height: calc(100vh - 140px - 50px);
		overflow: scroll;
		background: #f5f5f5;

		.list_item {
			@include flx-justify-between;
			height: 65px;
			box-sizing: border-box;
			padding: 15px;
			background: #ffffff;
			border-bottom: 1px solid #eeeeee;
			.left {
				@include flx-align-center;
				font-size: 15px;
				font-weight: bold;
				.name {
					margin-left: 12px;
          overflow: hidden;
          width: 3rem;
          text-overflow: ellipsis;
          white-space: nowrap;
				}
			}
			.time {
				font-size: 13px;
				font-weight: 400;
				color: #9ba0aa;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        span {
          width: 2rem;
        }
			}
		}
	}
}
</style>
